<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <h1>ajax和json综合</h1>
    <!--
    获取好友列表
-->
    <input type="button" value="响应数据是json字符串" onclick="method01()"> <br>
    <hr>
    <h3>好友列表</h3>
    <!--存放查询好友的结果信息-->
    <div id="messageDiv"></div>
    <table width="500px" cellspacing="0px" cellpadding="5px" border="1px" id="myTable">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
        </tr>

    </table>

</body>
<!--导入axios库-->
<script type="text/javascript" src="js/axios-0.18.0.js"></script>
<script type="text/javascript">

    function method01() {
        //向后台发送请求
        axios.post("http://localhost:8080/axiosJsonDemo01Servlet")
            .then(resp => {
                let obj = resp.data;
                let content = "";
                if (obj.flag) {
                    document.getElementById("messageDiv").innerHTML = obj.message;
                    for (let vd of obj.valueData) {
                        content = content + `<tr>
                                                <td>${vd.id}</td>
                                                <td>${vd.name}</td>
                                                <td>${vd.age}</td>
                                            </tr>`;
                    }
                document.getElementById("myTable").innerHTML += content;
                } else {
                    document.getElementById("messageDiv").innerHTML = obj.message;
                }
            });
    }
</script>

</html>